define([
    'jquery',
    'underscore',
    'backbone',
    'collections/user',
	'text!templates/business/booking-appointment.html'
], function ($, _, Backbone, UserCollection,template) {
	var BookingAppointmentForm = Backbone.View.extend({

        tagName:"div", // Not required since 'div' is the default if no el or tagName specified
		template : _.template(template),
        initialize:function () {
			_.bindAll(this);
            //this.model.bind("change", this.render, this);
        },

        render:function (eventName) {
            $(this.el).html(this.template(this.model.toJSON()));
            return this;
        },

        events:{
            //"change input":"change",
            
			"change #gender-list":"changeGender",
            "change #serviceList":"changeService",
            "change #employeeList":"changeEmployee",
            "change #date":"changeDate",
			"click .save":"saveAppointment"
            //"click .delete":"deleteBusiness"
        },

        change:function (event) {
            var target = event.target;
            console.log('changing ' + target.id + ' from: ' + target.defaultValue + ' to: ' + target.value);
            // You could change your model on the spot, like this:
            // var change = {};
            // change[target.name] = target.value;
            // this.model.set(change);
        },
		changeGender:function(event){
            var selected= $("#gender-list option:selected").val();
            var services=this.model.get('services');//get nested model
            var servicesByGender = services.where({gender: selected});
            $("#serviceList").html('').append('<option value="">-Select-</option>');
            _.each(servicesByGender, function (service) {
                var temp=service.toJSON();
                var option='<option value="'+temp.id+'">'+temp.name+'</option>';
                $("#serviceList").append(option);
            }, this);
			//console.log(selected);
		},
		
		changeService:function(event){
            var selectedService= $("#serviceList option:selected").val();
            $("#employeeList").html('').append('<option value="">-Select-</option>');
            var employeesList = new UserCollection();
            employeesList.url='api/employees/'+selectedService;
            employeesList.fetch({
                success:function () {
                    _.each(employeesList.models, function (employee) {
                        var temp=employee.toJSON();
                        var option='<option value="'+temp.id+'">'+temp.username+'</option>';
                        $("#employeeList").append(option);
                    });
                }
            });
            //console.log(selected);
		},
		changeEmployee:function(event){
			
		},
		changeDate:function(event){
			
		},

        saveAppointment:function () {
            this.model.set({
                name:$('#name').val(),
                overview:$('#overview').val(),
                bio:$('#bio').val()
            });

            var self = this;
            if (this.model.isNew()) {
                app.businessList.create(this.model, {
                    success:function () {
                        app.businessDetails(self.model.id);
                        app.navigate('business/' + self.model.id);
                    }
                });
            } else {
                this.model.save(this.model, {
                    success:function () {
                        app.businessDetails(self.model.id);
                        app.navigate('business/' + self.model.id);
                    }
                });
            }

            return false;
        },

        deleteBusiness:function () {
            this.model.destroy({
                success:function () {
                    alert('Business deleted successfully');
                    app.list();
                    app.navigate('business/new');
                }
            });
            return false;
        }

    });
	return BookingAppointmentForm;
});